<template>
  <div id="app">
    <div class="row at-row no-gutter">
      <div class="col-md-24 header">
        <div class="logo">
          <img src="./assets/images/logo.png" />
          <router-link to="/">
            <span class="title">智能会议室预定系统 - 用户端</span>
          </router-link>
        </div>

        <div class="user">
          <at-button-group v-if="!iflogin">
            <at-button type="primary" @click="loginmodal=true;registermodal=false">登录</at-button>
            <at-button @click="loginmodal=false;registermodal=true">注册</at-button>
          </at-button-group>
          <at-dropdown v-if="iflogin" @on-dropdown-command="handleCommand">
            <span>
              {{username}}
              <i class="icon icon-chevron-down"></i>
            </span>
            <at-dropdown-menu slot="menu">
              <at-dropdown-item name="quit">退出</at-dropdown-item>
            </at-dropdown-menu>
          </at-dropdown>
        </div>
      </div>
    </div>
    <router-view />

    <el-dialog :visible.sync="loginmodal" width="50%" class="modal loginmodal" :center="true">
      <div class="mymodalcontent">
        <img src="./assets/images/loginbg.jpg" />
        <div class="logininput">
          <div class="modaltitle">登 录</div>
          <div class="inputitem">
            <i class="icon icon-user-check"></i>
            <at-input v-model="account" placeholder="请输入用户名" size="large"></at-input>
          </div>
          <div class="inputitem">
            <i class="icon icon-lock"></i>
            <at-input v-model="password" placeholder="请输入密码" type="password" size="large"></at-input>
          </div>

          <div class="modalbuttons">
            <el-button @click="loginmodal = false">取 消</el-button>
            <el-button type="primary" @click="handlelogin">登 录</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="registermodal" width="50%" class="modal registermodal">
      <div class="mymodalcontent">
        <img src="./assets/images/registerbg.jpg" />
        <div class="logininput">
          <div class="modaltitle">注 册</div>
          <div class="inputitem">
            <i class="icon icon-mail"></i>
            <at-input v-model="rname" placeholder="请输入姓名" size="large"></at-input>
          </div>
          <div class="inputitem">
            <i class="icon icon-mail"></i>
            <at-input v-model="remail" placeholder="请输入邮箱" size="large"></at-input>
          </div>
          <div class="inputitem">
            <i class="icon icon-user-check"></i>
            <at-input v-model="raccount" placeholder="请输入手机号" size="large"></at-input>
          </div>
          <div class="inputitem">
            <i class="icon icon-shield"></i>
            <at-input v-model="msg" placeholder="请输入验证码" prepend-button size="large">
              <template slot="append">
                <span @click="getmeesage">发送验证码</span>
              </template>
            </at-input>
          </div>
          <div class="inputitem">
            <i class="icon icon-lock"></i>
            <at-input v-model="rpassword" placeholder="请输入密码" type="password" size="large"></at-input>
          </div>
          <div class="modalbuttons">
            <el-button @click="loginmodal = false">取 消</el-button>
            <el-button type="primary" @click="handleregister">注 册</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import store from "./store/index";
import { setCookie, getCookie, removeCookie } from "./assets/js/common";
import Axios from "axios";
import { fetch, post } from "./config/request";
import { changeToken } from "./store/mutation-types";
export default {
  name: "App",
  data() {
    return {
      loginmodal: false,
      registermodal: false,
      account: "",
      password: "",
      rname: "",
      remail: "",
      raccount: "",
      msg: "",
      rpassword: "",
      phonecode: "",
      emailcode: "",
      username: ""
    };
  },
  created() {
    if (getCookie("username")) {
      this.username = getCookie("username");
      this.changeToken({
        iflogin: true,
        username: this.username
      });
    }
  },
  computed: {
    ...mapState(["iflogin", "username"])
  },
  methods: {
    async getmeesage() {
      this.$message({
        message: "发送成功",
        type: "success"
      });
      Promise.all([
        this.sendmessage(),
        this.sendemailmessage()
      ]).then(res => {});
      Promise.all([this.getphonecode(), this.getemailcode()]).then(res => {
        this.phonecode = res[0];
        this.emailcode = res[1];
      });
    },
    getemailcode() {
      return new Promise((resolve, reject) => {
        fetch("/userapi/tmp/post_debug?email=" + this.remail).then(res => {
          console.log(res);
          resolve(res.data.emailCode);
        });
      });
    },
    getphonecode() {
      return new Promise((resolve, reject) => {
        fetch("/userapi/tmp/post_debug?phone=" + this.raccount).then(res => {
          console.log(res);
          resolve(res.data.phoneCode);
        });
      });
    },
    sendemailmessage() {
      return new Promise((resolve, reject) => {
        fetch("/userapi/notify/post/code?type=email&to=" + this.remail).then(
          res => {
            resolve(res);
          }
        );
      });
    },
    sendmessage() {
      return new Promise((resolve, reject) => {
        fetch("/userapi/notify/post/code?type=sms&to=" + this.raccount).then(
          res => {
            resolve(res);
          }
        );
      });
    },
    handleregister() {
      this.registermodal = false;
      let data = {
        name: this.rname,
        email: this.remail,
        phone: this.raccount,
        emailCode: this.emailcode,
        phoneCode: this.phonecode,
        pass: this.rpassword
      };
      console.log(data);
      post("/userapi/register", data).then(res => {
        this.$message({
          message: "注册成功",
          type: "success"
        });
        let token = res.data.token;
        console.log(token);
      });
    },
    handlelogin() {
      let that = this;
      this.loginmodal = false;

      post("/userapi/login", {
        name: this.account,
        pass: this.password
      })
        .then(res => {
          that.$message({
            message: "登陆成功",
            type: "success"
          });
          console.log(res);
          this.changeToken({
            iflogin: true,
            username: this.account,
            token: res.data.token
          });
          this.username = this.account;
          setCookie("token", res.data.token);
          setCookie("username", this.account);
          localStorage.setItem("token", res.data.token);
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCommand(name) {
      switch (name) {
        case "quit":
          removeCookie("username");
          removeCookie("token");
          this.changeToken({
            iflogin: false,
            username: "",
            token: ""
          });
          localStorage.removeItem("token");
          this.$router.push("/");
      }
    },
    ...mapMutations(["changeToken"])
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #f9faff;
  .header {
    width: 100%;
    height: 80px;
    background: white;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
    .logo {
      display: flex;
      align-items: center;
      img {
        width: 30px;
        margin-right: 20px;
      }
      .title {
        font-size: 20px;
        color: #3e76de;
        font-weight: bold;
      }
    }
    .user {
      line-height: 80px;
    }
  }
  .modal {
    .mymodalcontent {
      display: flex;
      img {
        flex: 1;
        width: 150px;
      }
      .logininput {
        flex: 1;
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        .modaltitle {
          margin-bottom: 20px;
          font-size: 30px;
        }
        .inputitem {
          display: flex;
          align-items: center;
          width: 100%;
          justify-content: space-around;
          padding: 0 40px;
          i {
            margin-right: 10px;
            font-size: 20px;
          }
          .at-input {
            margin: 10px 0;
            flex: 1;
          }
        }
        .modalbuttons {
          margin-top: 30px;
        }
      }
    }
  }
}
.row {
  margin: 0 !important;
}
</style>
